<template>
  <div class="bottom-view">
    <el-card shadow="hover" class="view">
      <template #header>
        <div>关键词搜索</div>
      </template>
      <div class="search-view">
        <div class="chart-wrap">
          <div class="chart">
            <div class="title">搜索用户数</div>
            <div class="count">{{ numberFormat(comUserData.userTotal) }}</div>
            <!-- <v-chart :option="getUserData('userList', '搜索用户数')" autoresize></v-chart> -->
            <v-chart :option="getUserData('userData')" autoresize></v-chart>
          </div>
          <div class="chart">
            <div class="title">搜索量</div>
            <div class="count">{{ numberFormat(comUserData.souSun) }}</div>
            <!-- <v-chart :option="getUserData('countList', '搜索量')" autoresize></v-chart> -->
            <v-chart :option="getUserData('countData')" autoresize></v-chart>
          </div>
        </div>
        <div class="search-table">
          <el-table :data="tableData" align="center" style="width: 100%">
            <el-table-column type="index" label="序号" width="130" />
            <el-table-column prop="word" label="关键字" />
            <el-table-column prop="count" label="搜索数量" />
            <el-table-column prop="user" label="搜索用户数" />
            <el-table-column prop="range" label="搜索占比" />
          </el-table>
          <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            layout="prev, pager, next"
            :total="tableTotalData.length"
          />
        </div>
      </div>
    </el-card>
    <el-card shadow="hover" class="view">
      <template #header>
        <div>分类销售排行</div>
        <el-radio-group v-model="radioSelect" size="small">
          <el-radio-button label="品类" />
          <el-radio-button label="商品" />
        </el-radio-group>
      </template>
      <div class="search-view">
        <v-chart :option="getClassRanking()" autoresize> </v-chart>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
export default {
  name: "Footer",
}
</script>
<script lang="ts" setup>
import { ref, computed } from "vue"
import { useReportDataStore } from "@/stores/reportData"
import useFormat from "@/hooks/useFormat"
const { numberFormat } = useFormat()
const reportDataStore = useReportDataStore()
const searchWord = computed(() => reportDataStore.reportData.searchWord)
const saleRank = computed(() => reportDataStore.reportData.saleRank)

const radioSelect = ref("品类")

// 表格数据,及计算搜索占比
const tableTotalData = computed(() => {
  if (!searchWord.value) return []
  return searchWord.value.map((item, index) => ({
    ...item,
    rankNo: index + 1,
    range: ((item.user / item.count) * 100).toFixed(2) + "%",
  }))
})
// 计算搜索用户总数与搜索量
const comUserData = computed(() => {
  const data = {
    userTotal: 0,
    souSun: 0,
    wordData: [] as String[],
    countData: [] as number[],
    userData: [] as number[],
  }
  searchWord.value?.forEach((item) => {
    data.userTotal += item.user
    data.souSun += item.count
    data.wordData.push(item.word)
    data.countData.push(item.count)
    data.userData.push(item.user)
  })
  return data
})

let currentPage = ref<number>(1) // 当前页码
let pageSize = ref<number>(5) // 每页显示的数量
// 分页计算,数据展示,点击跳转
const tableData = computed(() => {
  return tableTotalData.value.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value
  )
})

// 搜索用户数据折线图
const getUserData = (dataName: "countData" | "userData") => {
  return {
    xAxis: {
      boundaryGap: false, // 两边不留空白
      // type: "category",
      data: comUserData.value.wordData,
    },
    yAxis: {
      show: false, // 不显示y轴及其标线
      // type: "value",
    },
    series: [
      {
        data: comUserData.value[dataName],
        type: "line",
        // 线条光滑
        smooth: true,
        // 区域的样式
        areaStyle: {
          color: "pink",
        },
        // 折线点的样式
        itemStyle: {
          opacity: 0,
        },
      },
    ],
    // 图表在坐标中显示的位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    // 显示提示
    tooltip: {
      trigger: "axis",
      confine: true,
    },
  }
}

// 计算分类销售排行数据
const classRanking = computed(() => {
  const data = {
    categoryList: [] as any[], // 品类
    goodsList: [] as any[], // 商品
    categoryTotal: 0, //分类的数量
    goodsTotal: 0, // 商品的数量
  }
  if (!saleRank.value) return {} as any
  // 结构赋值
  const {
    category: { axisX: axisX1, data1 },
    goods: { axisX: axisX2, data1: data2 },
  } = saleRank.value
  const total1 = data1.reduce((prev, item) => prev + item, 0)
  const total2 = data2.reduce((prev, item) => prev + item, 0)
  data.categoryTotal = total1
  data.goodsTotal = total2

  axisX1.forEach((item, index) => {
    const percent = ((data1[index] / total1) * 100).toFixed(2) + "%"
    data.categoryList.push({
      name: item + "|" + percent, // 拼接data.name
      value: data1[index], // 数量
      percent, // 百分比
      labelName: item, // 名称
    })
  })
  axisX2.forEach((item, index) => {
    const percent = ((data2[index] / total2) * 100).toFixed(2) + "%"
    data.goodsList.push({
      name: item + "|" + percent, // 拼接data.name
      value: data2[index], // 数量
      percent, // 百分比
      labelName: item, // 名称
    })
  })
  console.log(axisX1, axisX2)

  return data
})

// 分类销售排行
const getClassRanking = () => {
  const list =
    radioSelect.value === "品类"
      ? classRanking.value.categoryList
      : classRanking.value.goodsList
  const total =
    radioSelect.value === "品类"
      ? classRanking.value.categoryTotal
      : classRanking.value.goodsTotal
  return {
    title: {
      text: `${radioSelect.value}分布`,
      textStyle: {
        fontSize: 16,
        color: "#666",
      },
    },
    tooltip: {
      trigger: "item", // 整个图标项触发
      formatter: (params: any) => {
        // data: 当前项数据
        // marker: 内置提供的圆点标签
        return `${radioSelect.value}分布<br>
        ${params.marker + params.data.labelName}<br>
        ${params.marker} ${params.data.value}<br>
        ${params.marker} ${params.data.percent}

        `
      },
    },
    legend: {
      left: "70%",
      top: "middle",
      // 排列方式
      orient: "vertical",
      textStyle: {
        color: "#8c8c8c",
      },
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "60%"], // 大小
        center: ["35%", "50%"], // 位置调整
        avoidLabelOverlap: false,
        itemStyle: {
          // borderRadius: 10, // 设置圆角
          borderColor: "#ccc", // 边框颜色
          borderWidth: 3, // 间距
        },
        // label: {
        //   show: false,
        //   position: "center",
        // },
        label: {
          // 在环的外侧
          position: "outside",
          // show: false,
          // 指定特定标题
          formatter: function (params: any) {
            // console.log('ff', params)
            return params.data.labelName
          },
        },
        emphasis: {
          // 设置hover时字体是否放大
          label: {
            show: true,
            fontSize: "20", // 字体大小
            fontWeight: "bold", // 加粗
          },
        },
        labelLine: {
          // 设置字体与内容的线条
          // show: true,
          length: 25,
          length2: 15,
        },
        data: list,
      },
    ],
  }
}
</script>
<style lang="scss" scoped>
.bottom-view {
  display: flex;
  margin-top: 20px;

  .view {
    flex: 1;

    &:first-child {
      margin-right: 10px;
    }

    &:last-child {
      margin-left: 10px;
    }

    :deep(.el-card__header) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
    }

    .search-view {
      height: 450px;
      display: flex;
      flex-direction: column;

      .chart-wrap {
        display: flex;

        .chart {
          flex: 1;

          &:first-child {
            margin-right: 5px;
          }

          &:last-child {
            margin-left: 5px;
          }

          .title {
            font-size: 14px;
            color: #999;
          }

          .count {
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
          }

          .echarts {
            height: 50px;
          }
        }
      }

      .search-table {
        flex: 1;
        margin-top: 20px;

        .el-pagination {
          text-align: right;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
